﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓库管理系统</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <script src="//unpkg.com/element-plus"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            background-color: #f5f7fa;
        }

        #tableBlock {
            margin: 20px auto;
            width: 100%;
            max-width: max-content;
            padding-bottom: 20px;
            box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            border-radius: 6px;
        }

        .search-area {
            padding: 20px;
            border-bottom: 0px solid #ebeef5;
        }

        .formTableInput, .formTableSelect {
            display: inline-block;
            width: 180px;
        }

        .buttonBlock {
            height: 40px;
            width: 100%;
            padding: 20px;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .pagination-container {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
            padding: 0 20px;
        }

        .audit-textarea {
            margin-top: 15px;
            width: 100%;
        }

        /* 操作列按钮间距 */
        .operate-btn {
            margin-right: 8px;
        }

        .btnAndTable {
            margin: 0 auto;
            padding: 0 20px;
        }

        .search-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 15px;
        }

        .search-item {
            display: flex;
            align-items: center;
        }

            .search-item label {
                min-width: 80px;
                text-align: right;
                margin-right: 10px;
            }

        /* 状态标签样式 */
        .status-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            color: #fff;
        }

        .status-draft {
            background-color: #909399;
        }

        .status-pending {
            background-color: #e6a23c;
        }

        .status-rejected {
            background-color: #f56c6c;
        }

        .status-normal {
            background-color: #67c23a;
        }

        .status-disabled {
            background-color: #409eff;
        }
    </style>
</head>
<body>
    <div id="app" class="common-layout" style="max-width: max-content;">
        <div id="tableBlock">
            <!-- 查询区域 -->
            <div class="search-area">
                <div class="search-row">
                    <div class="search-item">
                        <label>仓库：</label>
                        <el-input type="text" v-model="searchForm.warehouseName" class="formTableInput" placeholder="请输入仓库名称/编号"></el-input>
                    </div>
                    <div class="search-item">
                        <label>仓库状态：</label>
                        <el-select v-model="searchForm.warehouseStatus" class="formTableSelect" placeholder="请选择仓库状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="正常" value="3"></el-option>
                            <el-option label="停用" value="4"></el-option>
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="已驳回" value="2"></el-option>
                            <el-option label="草稿" value="0"></el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>负责人：</label>
                        <el-input type="text" v-model="searchForm.managerId" class="formTableInput" placeholder="请输入负责人ID"></el-input>
                    </div>
                    <div class="search-item">
                        <label>管理组织：</label>
                        <el-input type="text" v-model="searchForm.manageOrgId" class="formTableInput" placeholder="请输入管理组织ID"></el-input>
                    </div>
                    <el-button type="default" v-on:click="resetForm">重置</el-button>
                    <el-button type="primary" v-on:click="searchTable">查询</el-button>
                    <el-button type="default">高级搜索</el-button>
                </div>
                <!-- 操作按钮区域 -->
                <div class="buttonBlock">
                    <el-button type="primary" v-on:click="addWarehouse">新增</el-button>
                    <el-button type="default" v-on:click="editWarehouse">编辑</el-button>
                    <el-button type="default" v-on:click="deleteWarehouse">删除</el-button>
                    <el-button type="default" v-on:click="copyWarehouse">复制</el-button>
                    <el-button type="default" v-on:click="exportTable">导出</el-button>
                    <el-button type="default" v-on:click="importWarehouse">导入</el-button>
                    <el-button type="success" v-on:click="refreshTable">刷新</el-button>
                    <el-button type="warning" v-on:click="openAuditModal">审核</el-button>
                </div>
            </div>

            <!-- 表格区域 -->
            <div class="btnAndTable">
                <el-table :data="paginatedData"
                          style="width: 100%; margin-top: 10px"
                          v-on:selection-change="handleSelectionChange"
                          ref="multipleTable"
                          stripe
                          border>
                    <el-table-column fixed type="selection" width="50"></el-table-column>
                    <el-table-column fixed label="仓库编号" width="150">
                        <template #default="scope">
                            <span style="color: #10b981; cursor: pointer;" v-on:click="jumpToDetail(scope.row)">
                                {{ scope.row.warehouseCode }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed prop="warehouseName" label="仓库名称" width="120"></el-table-column>
                    <el-table-column fixed prop="warehouseStatus" label="状态" width="100">
                        <template #default="scope">
                            <span :class="['status-tag', getStatusClass(scope.row.warehouseStatus)]">
                                {{ getStatusText(scope.row.warehouseStatus) }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isDefaultWarehouse" label="是否默认仓库" width="120">
                        <template #default="scope">
                            {{ scope.row.isDefaultWarehouse === '1' ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="warehouseCapacity" label="仓库容量" width="120"></el-table-column>
                    <el-table-column prop="warehouseAddress" label="仓库地址" width="180"></el-table-column>
                    <el-table-column prop="manageOrgId" label="管理组织ID" width="120"></el-table-column>
                    <el-table-column prop="managerId" label="负责人ID" width="120"></el-table-column>
                    <el-table-column prop="sortOrder" label="排序序号" width="100"></el-table-column>
                    <el-table-column prop="warehouseLocked" label="是否锁定" width="100">
                        <template #default="scope">
                            {{ scope.row.warehouseLocked === '1' ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createBy" label="创建人" width="100"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="160">
                        <template #default="scope">
                            {{ formatDateTime(scope.row.createTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="updateBy" label="更新人" width="100"></el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" width="160">
                        <template #default="scope">
                            {{ formatDateTime(scope.row.updateTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="remarks" label="备注" width="200"></el-table-column>

                    <!-- 操作列：按状态动态显示按钮 -->
                    <el-table-column fixed="right" label="操作" min-width="130">
                        <template #default="scope">
                            <!-- 1. 草稿(0)/待审核(1)状态：显示【编辑】【删除】 -->
                            <el-button v-if="scope.row.warehouseStatus === '0' || scope.row.warehouseStatus === '1'"
                                       class="operate-btn"
                                       link type="primary" size="default"
                                       v-on:click="handleEdit(scope.row)">
                                编辑
                            </el-button>
                            <el-button v-if="scope.row.warehouseStatus === '0' || scope.row.warehouseStatus === '1'"
                                       class="operate-btn"
                                       link type="danger" size="default"
                                       v-on:click="deleteSingleWarehouse(scope.row)">
                                删除
                            </el-button>

                            <!-- 2. 已驳回(2)状态：显示【编辑】【撤销】 -->
                            <el-button v-if="scope.row.warehouseStatus === '2'"
                                       class="operate-btn"
                                       link type="primary" size="default"
                                       v-on:click="handleEdit(scope.row)">
                                编辑
                            </el-button>
                            <el-button v-if="scope.row.warehouseStatus === '2'"
                                       class="operate-btn"
                                       link type="warning" size="default"
                                       v-on:click="handleRejectCancel(scope.row)">
                                撤销
                            </el-button>

                            <!-- 3. 正常(3)状态：显示【停用】 -->
                            <el-button v-if="scope.row.warehouseStatus === '3'"
                                       class="operate-btn"
                                       link type="warning" size="default"
                                       v-on:click="disableWarehouse(scope.row)">
                                停用
                            </el-button>

                            <!-- 4. 停用(4)状态：显示【启用】 -->
                            <el-button v-if="scope.row.warehouseStatus === '4'"
                                       class="operate-btn"
                                       link type="success" size="default"
                                       v-on:click="enableWarehouse(scope.row)">
                                启用
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页区域 -->
            <div class="pagination-container">
                <el-pagination v-model:current-page="currentPage"
                               v-model:page-size="pageSize"
                               :page-sizes="[10, 20, 50, 100]"
                               :total="total"
                               layout="total, sizes, prev, pager, next, jumper"
                               v-on:size-change="handleSizeChange"
                               v-on:current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <!-- 审核模态框 -->
        <el-dialog title="仓库审核"
                   v-model="isAuditModalOpen"
                   width="500px"
                   :before-close="handleAuditModalClose">
            <div class="audit-content">
                <el-radio-group v-model="selectedAuditResult" required>
                    <el-radio label="pass">通过（转为正常状态）</el-radio>
                    <el-radio label="reject">驳回</el-radio>
                </el-radio-group>
                <el-input class="audit-textarea"
                          type="textarea"
                          v-model="auditOpinion"
                          placeholder="请输入审核意见（驳回时必填）"
                          :rows="4"
                          :maxlength="200"
                          show-word-limit></el-input>
            </div>
            <template #footer>
                <el-button v-on:click="isAuditModalOpen = false">取消</el-button>
                <el-button type="primary" v-on:click="confirmAudit">确认审核</el-button>
            </template>
        </el-dialog>
    </div>

    <script>
        const { createApp, ref, onMounted, computed } = Vue;
        const { ElMessageBox, ElMessage, ElNotification } = ElementPlus;

        // 状态映射配置：实体类中warehouseStatus为char(1)，对应状态文字和样式
        const STATUS_CONFIG = {
            '0': { text: '草稿', class: 'status-draft' },
            '1': { text: '待审核', class: 'status-pending' },
            '2': { text: '已驳回', class: 'status-rejected' },
            '3': { text: '正常', class: 'status-normal' },
            '4': { text: '停用', class: 'status-disabled' }
        };

        const app = createApp({
            setup() {
                // -------------------------- 1. 基础数据初始化 --------------------------
                // 初始化加载数据
                const refreshData = async () => {
                    try {
                        const response = await axios.post('/BiWarehouse/GetAll');
                        if (response.data.code === 200) {
                            tableData.value = response.data.data;
                            ElMessage.success('仓库信息数据加载成功');
                        }
                    } catch (error) {
                        console.error('加载出错:', error);
                        ElMessage.error('数据加载失败，请重试');
                    }
                };

                // 搜索表单（绑定实体类字段，首字母小写）
                const searchForm = ref({
                    warehouseName: '',
                    warehouseStatus: '',
                    managerId: '',
                    manageOrgId: ''
                });

                // 表格数据
                const tableData = ref([]);

                // 选中行数据
                const selectedRows = ref([]);
                // 表格实例
                const multipleTable = ref(null);

                // -------------------------- 2. 分页逻辑 --------------------------
                const currentPage = ref(1);
                const pageSize = ref(10);
                const total = computed(() => tableData.value.length);
                const paginatedData = computed(() => {
                    const start = (currentPage.value - 1) * pageSize.value;
                    const end = start + pageSize.value;
                    return tableData.value.slice(start, end);
                });

                const handleSizeChange = (val) => {
                    pageSize.value = val;
                    currentPage.value = 1;
                };

                const handleCurrentChange = (val) => {
                    currentPage.value = val;
                    if (multipleTable.value) {
                        multipleTable.value.clearSelection();
                        selectedRows.value = [];
                    }
                };

                // -------------------------- 3. 状态转换辅助方法 --------------------------
                // 根据状态值获取显示文字
                const getStatusText = (status) => {
                    return STATUS_CONFIG[status]?.text || '未知状态';
                };

                // 根据状态值获取样式类
                const getStatusClass = (status) => {
                    return STATUS_CONFIG[status]?.class || '';
                };

                // -------------------------- 4. 审核模态框相关 --------------------------
                const isAuditModalOpen = ref(false);
                const selectedAuditResult = ref('');
                const auditOpinion = ref('');
                const canAuditRows = ref([]);

                // 打开审核模态框（仅待审核状态1可审核）
                const openAuditModal = () => {
                    if (selectedRows.value.length === 0) {
                        ElMessage({ type: 'warning', message: '请先选中需要审核的仓库！' });
                        return;
                    }
                    // 筛选待审核状态（1）的仓库
                    canAuditRows.value = selectedRows.value.filter(row => row.warehouseStatus === '1');
                    if (canAuditRows.value.length === 0) {
                        ElMessage({ type: 'error', message: '选中的仓库中无「待审核」状态数据！' });
                        return;
                    }
                    selectedAuditResult.value = '';
                    auditOpinion.value = '';
                    isAuditModalOpen.value = true;
                };

                // 关闭审核模态框
                const handleAuditModalClose = () => {
                    selectedAuditResult.value = '';
                    auditOpinion.value = '';
                    isAuditModalOpen.value = false;
                };

                // 确认审核（通过→3正常，驳回→2已驳回）
                const confirmAudit = () => {
                    if (!selectedAuditResult.value) {
                        ElMessage({ type: 'warning', message: '请选择审核结果（通过/驳回）！' });
                        return;
                    }
                    if (selectedAuditResult.value === 'reject' && !auditOpinion.value.trim()) {
                        ElMessage({ type: 'warning', message: '驳回仓库时必须填写审核意见！' });
                        return;
                    }

                    const auditIds = canAuditRows.value.map(row => row.warehouseId).join(',');
                    ElMessageBox.confirm(
                        `确定${selectedAuditResult.value === 'pass' ? '通过' : '驳回'}选中的 ${canAuditRows.value.length} 条仓库数据吗？`,
                        '确认审核',
                        { type: selectedAuditResult.value === 'pass' ? 'info' : 'warning' }
                    ).then(() => {
                        // 实际项目中应调用后端接口更新状态，此处为前端模拟
                        tableData.value.forEach(row => {
                            if (auditIds.includes(row.warehouseId.toString())) {
                                row.warehouseStatus = selectedAuditResult.value === 'pass' ? '3' : '2';
                                row.updateTime = new Date(); // 模拟更新时间
                            }
                        });
                        ElMessage({
                            type: 'success',
                            message: `仓库${selectedAuditResult.value === 'pass' ? '审核通过（已转为正常状态）' : '审核驳回'}成功！`
                        });
                        if (multipleTable.value) {
                            multipleTable.value.clearSelection();
                            selectedRows.value = [];
                        }
                        handleAuditModalClose();
                    }).catch(() => {
                        ElMessage({ type: 'info', message: '已取消审核' });
                    });
                };

                // -------------------------- 5. 核心操作方法 --------------------------
                // 5.1 选中行变化
                const handleSelectionChange = (val) => {
                    selectedRows.value = val;
                };

                // 5.2 编辑（仅草稿0/待审核1/已驳回2可执行）
                const handleEdit = (row) => {
                    const allowEditStatus = ['0', '1', '2'];
                    if (!allowEditStatus.includes(row.warehouseStatus)) {
                        ElMessage({
                            type: 'error',
                            message: `当前「${getStatusText(row.warehouseStatus)}」状态不允许编辑！`
                        });
                        return;
                    }
                    ElNotification({
                        title: '编辑仓库',
                        message: `编辑仓库：${row.warehouseName}`,
                        type: 'info'
                    });
                    // 实际项目中跳转编辑页面
                    // window.location.href = `/BiWarehouse/Edit?id=${row.warehouseId}`;
                };

                // 5.3 单行删除（仅草稿0/待审核1可执行）
                const deleteSingleWarehouse = (row) => {
                    if (row.warehouseStatus !== '0' && row.warehouseStatus !== '1') {
                        ElMessage({
                            type: 'error',
                            message: `当前「${getStatusText(row.warehouseStatus)}」状态不允许删除！`
                        });
                        return;
                    }
                    ElMessageBox.confirm(
                        `确定删除仓库 "${row.warehouseName}" 吗？删除后不可恢复！`,
                        '警告',
                        { type: 'error' }
                    ).then(() => {
                        // 实际项目中应调用后端删除接口
                        tableData.value = tableData.value.filter(item => item.warehouseId !== row.warehouseId);
                        ElMessage({ type: 'success', message: '删除成功！' });
                    }).catch(() => {
                        ElMessage({ type: 'info', message: '已取消删除' });
                    });
                };

                // 5.4 撤销操作（仅已驳回2可执行）
                const handleRejectCancel = (row) => {
                    if (row.warehouseStatus !== '2') {
                        ElMessage({
                            type: 'error',
                            message: `当前「${getStatusText(row.warehouseStatus)}」状态不允许撤销！`
                        });
                        return;
                    }
                    ElMessageBox.confirm(
                        `确定撤销驳回状态，将仓库"${row.warehouseName}"恢复为「待审核」吗？`,
                        '确认撤销',
                        { type: 'warning' }
                    ).then(() => {
                        row.warehouseStatus = '1'; // 恢复为待审核状态
                        row.updateTime = new Date();
                        ElMessage({ type: 'success', message: '撤销成功！' });
                    }).catch(() => {
                        ElMessage({ type: 'info', message: '已取消撤销' });
                    });
                };

                // 5.5 停用仓库（仅正常3可执行）
                const disableWarehouse = (row) => {
                    ElMessageBox.confirm(
                        `确定停用仓库"${row.warehouseName}"吗？`,
                        '确认停用',
                        { type: 'warning' }
                    ).then(() => {
                        row.warehouseStatus = '4'; // 改为停用状态
                        row.updateTime = new Date();
                        ElMessage({ type: 'success', message: '仓库已停用！' });
                    }).catch(() => {
                        ElMessage({ type: 'info', message: '已取消停用' });
                    });
                };

                // 5.6 启用仓库（仅停用4可执行）
                const enableWarehouse = (row) => {
                    ElMessageBox.confirm(
                        `确定启用仓库"${row.warehouseName}"吗？`,
                        '确认启用',
                        { type: 'info' }
                    ).then(() => {
                        row.warehouseStatus = '3'; // 改为正常状态
                        row.updateTime = new Date();
                        ElMessage({ type: 'success', message: '仓库已启用！' });
                    }).catch(() => {
                        ElMessage({ type: 'info', message: '已取消启用' });
                    });
                };

                // 5.7 批量删除（仅草稿0/待审核1可执行）
                const deleteWarehouse = () => {
                    if (selectedRows.value.length === 0) {
                        ElMessage({ type: 'warning', message: '请先选中需要删除的仓库！' });
                        return;
                    }
                    // 筛选可删除的仓库（状态0或1）
                    const canDeleteRows = selectedRows.value.filter(row =>
                        row.warehouseStatus === '0' || row.warehouseStatus === '1'
                    );
                    if (canDeleteRows.length === 0) {
                        ElMessage({ type: 'error', message: '仅「草稿」或「待审核」状态的仓库可删除！' });
                        return;
                    }
                    const deleteIds = canDeleteRows.map(row => row.warehouseId).join(',');
                    ElMessageBox.confirm(
                        `确定删除选中的 ${canDeleteRows.length} 条仓库数据吗？`,
                        '警告',
                        { type: 'error' }
                    ).then(() => {
                        tableData.value = tableData.value.filter(row => !deleteIds.includes(row.warehouseId.toString()));
                        ElMessage({ type: 'success', message: '删除成功！' });
                        selectedRows.value = [];
                    }).catch(() => {
                        ElMessage({ type: 'info', message: '已取消删除' });
                    });
                };

                // -------------------------- 6. 其他辅助方法 --------------------------
                // 日期格式化
                const formatDateTime = (date) => {
                    if (!date) return '';
                    const dt = new Date(date);
                    const year = dt.getFullYear();
                    const month = String(dt.getMonth() + 1).padStart(2, '0');
                    const day = String(dt.getDate()).padStart(2, '0');
                    const hours = String(dt.getHours()).padStart(2, '0');
                    const minutes = String(dt.getMinutes()).padStart(2, '0');
                    const seconds = String(dt.getSeconds()).padStart(2, '0');
                    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                };

                // 仓库编号点击跳转详情页
                const jumpToDetail = (row) => {
                    ElMessage({ type: 'info', message: `跳转至仓库${row.warehouseCode}的详情页` });
                    window.location.href = `/BiWarehouse/Details?id=${row.warehouseId}`;
                };

                // 导出
                const exportTable = () => {
                    ElMessage({ type: 'success', message: '导出请求已触发，正在下载...' });
                    // 实际项目中调用后端导出接口
                    // window.location.href = '/BiWarehouse/Export';
                };

                // 刷新
                const refreshTable = () => {
                    if (multipleTable.value) {
                        multipleTable.value.clearSelection();
                        selectedRows.value = [];
                    }
                    currentPage.value = 1;
                    refreshData(); // 重新加载数据
                    ElMessage({ type: 'success', message: '表格已刷新！' });
                };

                // 重置表单
                const resetForm = () => {
                    searchForm.value = {
                        warehouseName: '',
                        warehouseStatus: '',
                        managerId: '',
                        manageOrgId: ''
                    };
                    refreshTable();
                };

                // 查询
                const searchTable = () => {
                    const { warehouseName, warehouseStatus, managerId, manageOrgId } = searchForm.value;

                    const filteredData = tableData.value.filter(row => {
                        const matchName = warehouseName ?
                            (row.warehouseName.includes(warehouseName) || row.warehouseCode.includes(warehouseName)) : true;
                        const matchStatus = warehouseStatus ? row.warehouseStatus === warehouseStatus : true;
                        const matchManager = managerId ? row.managerId.toString().includes(managerId) : true;
                        const matchOrg = manageOrgId ? row.manageOrgId.toString().includes(manageOrgId) : true;
                        return matchName && matchStatus && matchManager && matchOrg;
                    });

                    tableData.value = filteredData;
                    currentPage.value = 1;
                    ElMessage({ type: 'success', message: `查询到 ${filteredData.length} 条数据！` });
                };

                // 新增
                const addWarehouse = () => {
                    ElNotification({ title: '提示', message: '跳转至新增仓库页面', type: 'info' });
                    window.location.href = '/BiWarehouse/Create';
                };

                // 复制
                const copyWarehouse = () => {
                    if (selectedRows.value.length === 0) {
                        ElMessage({ type: 'warning', message: '请先选中需要复制的仓库！' });
                        return;
                    }
                    if (selectedRows.value.length > 1) {
                        ElMessage({ type: 'warning', message: '仅支持单条仓库数据复制！' });
                        return;
                    }
                    const targetRow = selectedRows.value[0];
                    ElNotification({ title: '复制仓库', message: `开始复制仓库：${targetRow.warehouseName}`, type: 'info' });
                    // 实际项目中可跳转至新增页面并携带复制的数据
                    // window.location.href = `/BiWarehouse/Create?copyId=${targetRow.warehouseId}`;
                };

                // 批量编辑
                const editWarehouse = () => {
                    if (selectedRows.value.length === 0) {
                        ElMessage({ type: 'warning', message: '请先选中需要编辑的仓库！' });
                        return;
                    }
                    if (selectedRows.value.length > 1) {
                        ElMessage({ type: 'warning', message: '仅支持单条仓库数据编辑！' });
                        return;
                    }
                    const targetRow = selectedRows.value[0];
                    handleEdit(targetRow);
                };

                // 导入
                const importWarehouse = () => {
                    ElNotification({ title: '导入仓库', message: '打开仓库数据导入窗口', type: 'info' });
                    // 实际项目中可打开文件上传组件
                };

                // 页面挂载时加载数据
                onMounted(() => {
                    refreshData();
                });

                // 暴露数据和方法
                return {
                    // 搜索表单
                    searchForm,

                    // 表格相关
                    tableData,
                    paginatedData,
                    selectedRows,
                    multipleTable,
                    handleSelectionChange,
                    handleEdit,
                    deleteSingleWarehouse,
                    handleRejectCancel,
                    disableWarehouse,
                    enableWarehouse,
                    getStatusText,
                    getStatusClass,

                    // 分页相关
                    currentPage,
                    pageSize,
                    total,
                    handleSizeChange,
                    handleCurrentChange,

                    // 审核模态框相关
                    isAuditModalOpen,
                    selectedAuditResult,
                    auditOpinion,
                    openAuditModal,
                    handleAuditModalClose,
                    confirmAudit,

                    // 按钮方法
                    addWarehouse,
                    editWarehouse,
                    deleteWarehouse,
                    copyWarehouse,
                    importWarehouse,
                    exportTable,
                    refreshTable,
                    resetForm,
                    searchTable,
                    formatDateTime,
                    jumpToDetail
                };
            }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>